import { _decorator, CCString, Component, EventTarget, Input, Node, RichText, tween, UIOpacity } from 'cc';
import { Logger } from 'db://assets/util';
import { Printer } from '../../components/Printer';
const { ccclass, property } = _decorator;

@ccclass('NarratorContainer')
export class NarratorContainer extends Component {
    #logger = new Logger('旁白容器::NarratorContainer')
    @property(RichText)
    contextNode: RichText

    @property(CCString)
    context: string

    get UIOpacity() {
        return this.getComponent(UIOpacity)
    }

    get Printer() {
        return this.getComponent(Printer)
    }

    protected onEnable(): void {
        this.#logger.debug("#onEnable")
        this.Printer.printerStr = this.context
        this.UIOpacity.opacity = 0
        this.fadeIn(() => {
            this.Printer.printAnime()
        })
    }

    protected start(): void {
        this.#logger.debug("#start")
    }

    protected onLoad(): void {
        this.#logger.debug("#onLoad")
    }

    fadeIn(cb = () => { }) {
        tween(this.UIOpacity)
            .to(0.2, { opacity: 255 }, { easing: 'fade' })
            .call(cb)
            .start()
    }

    fadeOut(cb = () => { }) {
        tween(this.UIOpacity)
            .to(0.2, { opacity: 0 }, { easing: 'fade' })
            .call(cb)
            .start()
    }

    clear(): Promise<void> {
        return new Promise(resolve => {
            this.fadeOut(() => {
                this.node.active = false
                resolve()
            })
        })
    }
}

